<template xmlns="http://www.w3.org/1999/html">
  <div>
    <Tabs ref="tabs" style="margin: 10px" :value="param.productTabs" @on-click="chooseTab">
      <TabPane label="产品概况" name="product">
        <Form ref="paramProductSimple" :model="param.paramProduct" :rules="ruleProduct" :label-width="120" class="modal_newuser_form">
          <div class="modal_base_div" style="margin-top:0px !important;">
            <div class="modal_base_div_title"><strong>产品基本属性 :</strong></div>
            <Row>
              <i-col span="24">
                <FormItem label="产品名称 :" prop="productName">
                  <Input  v-model.trim="param.paramProduct.productName" style="width: 90%">
                    <Button slot="append" @click="nameFirstUpperCase" title="自动校验大小写">Aa</Button>
                  </Input>
                </FormItem>
              </i-col>
            </Row>

            <Row>
              <i-col span="24">
                <FormItem label="搜索关键词 :" prop="keyword" inline>
                  <Input v-model.trim="param.paramProduct.keyword" style="width:80%" class="modal_newuser_form_input"
                         placeholder="用户搜索哪些词时最应该展示该产品，该内容将会影响实际的搜索排序"
                  ></Input>
                  <span class="tiy_key" style="font-size: 0.5em">关键词之间以“;”分隔</span>
                </FormItem>
              </i-col>
            </Row>

            <Row>
              <i-col span="12">
                <FormItem label="产品编号 :" prop="productCode">
                  <Input v-model.trim="pCode" class="modal_newuser_form_input" readonly></Input>
                </FormItem>
              </i-col>
<!--              <i-col span="4">-->
<!--                <FormItem label="是否中性 :" inline>-->
<!--                  <i-switch v-model="param.paramProduct.productIsUnisex">-->
<!--                    <Icon type="android-done" slot="open"></Icon>-->
<!--                    <Icon type="android-close" slot="close"></Icon>-->
<!--                  </i-switch>-->
<!--                </FormItem>-->
<!--              </i-col>-->
              <i-col span="4">
                <FormItem label="是否置顶 :">
                  <i-switch size="large" v-model="param.paramProduct.isTop">
                    <span slot="open">取消</span>
                    <span slot="close">置顶</span>
                  </i-switch>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="12">
                <FormItem label="价格单位 :" prop="priceUnit" inline>
                  <Select v-model="param.paramProduct.priceUnit" style="width:200px">
                    <Option v-for="item in priceUnits" :value="item.value" :key="item.value">{{ item.name }} - {{item.enName}}</Option>
                  </Select>
                </FormItem>
              </i-col>
              <i-col span="12">
                <FormItem label="适用性别 :" prop="productGender">
                  <Select v-model="param.paramProduct.productGender" placeholder="请选择性别" style="width:200px">
                    <Option v-for="item in sexList" :value="item.value" :key="item.value">{{ item.name }}</Option>
                  </Select>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <i-col span="12">
                <FormItem label="产品排序 :" prop="sequence" inline>
                  <InputNumber v-model="param.paramProduct.sequence" :min=0
                         class="modal_newuser_form_input"></InputNumber>
                  <span class="tiy_key" style="font-size: 0.5em">序号越小越靠前</span>
                </FormItem>
              </i-col>

              <i-col span="12">
                <FormItem label="产品标签（后台管理用）:">
                  <CheckboxGroup v-model="param.paramProduct.manageTabIds">
                    <Checkbox v-for="item in allManageTabs" :label="item.id">{{item.name}}</Checkbox>
                  </CheckboxGroup>
                </FormItem>
              </i-col>
            </Row>

            <Row>
              <i-col span="12">
                <FormItem label="计费重量（g）:" prop="countWeight">
                  <InputNumber v-model="param.paramProduct.countWeight" :min=1 class="modal_newuser_form_input"></InputNumber>
                  <span class="tiy_key" style="font-size: 0.5em">重量必须大于0</span>
                </FormItem>
              </i-col>
            </Row>

            <Row>
              <i-col span="24">
                <FormItem label="特殊说明 :" prop="description" inline>
                  <Input v-model="param.paramProduct.description" style="width:80%" class="modal_newuser_form_input" type="textarea"
                         placeholder="该字段在产品详情页展示，目的为叮嘱或警示顾客。例如：该产品尺码偏小，请选购时注意"
                  ></Input>
                  <span class="tiy_key" style="font-size: 0.5em; text-align: left;">500字以内，展示给客户</span>
                </FormItem>
              </i-col>
            </Row>

            <Row>
              <i-col span="24">
                <FormItem label="备注 :" prop="note" inline>
                  <Input v-model="param.paramProduct.note" style="width:80%" class="modal_newuser_form_input" type="textarea"></Input>
                  <span class="tiy_key" style="font-size: 0.5em; text-align: left;">300字以内，展示给内部员工</span>
                </FormItem>
              </i-col>
            </Row>

          </div>

          <div class="modal_base_div">
            <div class="modal_base_div_title"><strong>产品尺码 :</strong></div>
            <Row>
              <i-col span="12">
                <FormItem label="尺码类型 :" prop="sysSizeType" inline>
                  <Select v-model="param.paramProduct.sysSizeType" style="width:200px" @on-change="changeSysSizeType" placeholder="请选择">
                    <Option v-for="item in sysSizeTypeDict" :value="item.value" :key="item.value">{{ item.name }}
                    </Option>
                  </Select>
                </FormItem>
              </i-col>

              <i-col span="12">
                <FormItem label="尺码选择:" prop="sysSizeIds">
                  <CheckboxGroup v-model="param.paramProduct.sysSizeIds" @on-change="changeSysSizeData">
                    <Checkbox v-for="(item,key) in allSysSizeMap[param.paramProduct.sysSizeType]"
                              :readonly="param.paramProduct.sysSizeType==0" v-model="param.paramProduct.sysSizeType==0"
                              :key="key" :label="item.id">
                      <span>{{item.name}}</span>
                    </Checkbox>
                  </CheckboxGroup>
                </FormItem>
                <span style="color: red;font-size: 0.5em" class="tiy_key" v-show="productSizeChangeState">尺码若改变，保存成功后需要在' 产品详情-编辑色卡' 处重新调整库存</span>
              </i-col>
            </Row>
            <Row>
              <i-col span="24">
                <FormItem label="自定义尺码:" v-show="param.paramProduct.sysSizeType!=0">
                  <span v-for="(item,index) in param.paramProduct.customSize">
                    <Tag type="dot" closable color="#EF6AFF" closable
                         @on-close="handleClose(index)">{{item.name}}</Tag>
                  </span>
                  <Button icon="md-add" type="dashed" size="small" @click="customSizeAdd">添加尺码</Button>
                </FormItem>
              </i-col>
            </Row>
            <hr/>
            <Row>
              <i-col span="24">
                <div class="modal_base_div_title"><strong>产品尺码表(可选) :</strong>
                  <Select v-model="param.paramProduct.sizeTableType" @on-change="changeSizeTableType" style="width: 150px; margin-left: 10px;">
                    <Option :value="0">无</Option>
                    <Option :value="1">手动录入表格</Option>
                    <Option :value="2">复制录入表格</Option>
                  </Select>
                </div>
              </i-col>
            </Row>
            <Row v-if="param.paramProduct.hasSizeTable">
              <i-col span="12">
                <FormItem label="尺码表标题 :" v-show="param.paramProduct.sysSizeType!=0">
                  <Input v-model.trim="param.productSizeTable.title" style="width: 100%"
                         class="modal_newuser_form_input" placeholder="非必要,可为空"></Input>
                </FormItem>
              </i-col>
              <i-col span="12">
                <FormItem label="副标题 :" v-show="param.paramProduct.sysSizeType!=0">
                  <Input v-model.trim="param.productSizeTable.subTitle"  style="width: 80%"
                         class="modal_newuser_form_input" placeholder="非必要,可为空"></Input>
                </FormItem>
              </i-col>
            </Row>
            <Row v-if="param.paramProduct.hasSizeTable">
              <div v-if="param.paramProduct.useTranslateSizeTableTool">
                <SizeTableTransform v-model="param.paramProduct.sizeTable"></SizeTableTransform>
              </div>
              <FormItem label="尺码表格定义 :" v-else>
                <InputNumber v-model="param.productSizeTable.rowCount"  style="margin: 0px 0.5rem" :min=2></InputNumber>行
                <InputNumber v-model="param.productSizeTable.columnCount"  style="margin: 0px  0.5rem" :min=2></InputNumber>列   &nbsp;&nbsp;&nbsp;&nbsp; =>
                <Button type="dashed"  @click="showCreateTable" icon="md-add"  style="width: 120px;margin: 0px 1rem" >生成表格</Button>
              </FormItem>
            </Row>
            <Row v-if="param.paramProduct.hasSizeTable">
              <i-col span="24" v-if="!param.paramProduct.useTranslateSizeTableTool">
                  <Table stripe border  highlight-row :columns="sizeTableTitles"
                         :data="productSizeDetail" no-data-text="暂无数据">
                  </Table>
                  <div style="text-align: center;margin-top: 2rem" v-show="productSizeDetail.length!==0">
                    <Button type="info" ghost @click="addRow" icon="md-add" style="width: 120px;margin-right: 16px">新增一行</Button>
                    <Button type="info" ghost long @click="addColumn" icon="md-add" style="width: 120px;margin-left: 16px">新增一列</Button>
                  </div>
              </i-col>
            </Row>
            <Row>
              <i-col span="20">
                <FormItem label="尺码详情图 :" style="margin-top: 1rem">
                  <Button type="primary" class="" @click="selectImages(false,false,4)">选择尺码图 :</Button>
                </FormItem>
              </i-col>
            </Row>
            <Row>
              <FormItem label="" v-if="param.paramProduct.productSizeImages.length>0">
                <i-col span="4" v-for=" (item, index) in param.paramProduct.productSizeImages">
                  <Card style="width:120px;height:120px;padding-top: 5px">
                    <img :src="yunPath+item.url" style="max-width:100px;max-height:100px;" @click="showImage(yunPath+item.url)"/>
                      <div slot="extra">
                        <span @click="deleteSizeImage(item.url)">
                          <Button type="text" shape="circle" size="small" icon="ios-close-circle"></Button>
                        </span>
                      </div>
                  </Card>
                </i-col>
              </FormItem>
            </Row>
          </div>

          <div class="modal_base_div">
            <div class="modal_base_div_title"><strong>产品角标和橱窗图 :</strong></div>
            <Row>
              <i-col span="12">
                <FormItem label="产品角标 (可选) :">
                  <Select v-model="param.paramProduct.tab" style="width:200px" clearable>
                    <Option v-for="item in allTabs" :value="item.id" :key="item.id">
                      <img :src="yunPath+item.icon" width="16px" style="margin-right: 1rem">{{ item.name }}
                    </Option>
                  </Select>
                </FormItem>
              </i-col>
              <i-col span="12">
                <FormItem label="橱窗图(列表图):" prop="showImage">
                  <Button type="primary" class="" @click="selectImages(false,true,0)">
                    选择图片
                  </Button>
                </FormItem>
                <FormItem label="" v-if="param.paramProduct.showImage200w">
                  <Card style="max-width: 120px;padding-top: 10px;text-align: center">
                    <img :src="param.paramProduct.showImage200w" height="80"  @click="showImage(yunPath + param.paramProduct.showImage.originalImagePath)"/>
                  </Card>
                </FormItem>
              </i-col>
            </Row>

            <Row>

              <i-col span="24">
                <FormItem label="产品视频:">
                  <Button type="primary" class="" @click="selectImages(false,true,0)">
                    选择视频
                  </Button>
                </FormItem>
                <FormItem label="" v-if="param.paramProduct.videos" >
                  <div  :key="key" style="display: flex"  >
                    <Card style="max-width: 400px;padding-top: 10px;text-align: center" v-for="item in param.paramProduct.videos" >
                      <video  controls muted style="max-width: 100%;">
                        <source :src="item.originalImageUrl"  type="video/mp4">
                      </video>
                      <div >
                        <span @click="deleteVideo(item)">
                          <Button type="text" shape="circle" size="small" icon="ios-close-circle" style="color: #9c27b0"></Button>
                        </span>
                      </div>
                    </Card>
                  </div>
                </FormItem>
              </i-col>
            </Row>


            <Row>
              <i-col span="12">
                <FormItem label="产品主图 : ">
                  <Button type="primary" class="" @click="selectImages(false,false,6)">选择图片</Button>
                  <span>拖动排序</span>
                </FormItem>
                <FormItem label="" v-if="param.paramProduct.mainImages!=null && param.paramProduct.mainImages.length>0">
                  <Row>
                    <i-col span="8" v-for="(item,key) in param.paramProduct.mainImages" :key="key"
                           v-dragging="{item: item, list:param.paramProduct.mainImages, group: 'mainImage'}">
                      <Card class="item_card">
                        <Img  :src="yunPath + item.zipImg" width="100%" @click="showImage(yunPath + item.originalImagePath)"/>
                        <div slot="extra">
                        <span @click="mainImageDelete(item)">
                          <Button type="text" shape="circle" size="small" icon="ios-close-circle" style="color: #9c27b0"></Button>
                        </span>
                        </div>
                      </Card>
                    </i-col>
                  </Row>
                </FormItem>
              </i-col>
              <i-col span="12">
                <FormItem label="产品明细图 : ">
                  <Button type="primary" class="" @click="selectImages(false,false,7)">选择图片</Button>
                  <span>拖动排序</span>
                </FormItem>
                <FormItem label="" v-if="param.paramProduct.detailImages!=null && param.paramProduct.detailImages.length>0">
                  <Row>
                    <i-col span="8" v-for="(item,key) in param.paramProduct.detailImages" :key="key"
                           v-dragging="{item: item, list:param.paramProduct.detailImages, group: 'detailImage'}">
                      <Card class="item_card">
                        <Img  :src="yunPath + item.originalImagePath" width="100%" @click="showImage(yunPath + item.originalImagePath)"/>
                        <div slot="extra">
                        <span @click="detailImageDelete(item)">
                          <Button type="text" shape="circle" size="small" icon="ios-close-circle" style="color: #9c27b0"></Button>
                        </span>
                        </div>
                      </Card>
                    </i-col>
                  </Row>
                </FormItem>
              </i-col>
            </Row>
            <hr/>

            <Row :gutter="8">
              <FormItem label="产品分类 :" required  prop="classificationIds">
                <div>
                  <Button type="info" icon="ios-build" ghost @click="isclassificationTreeModelShowing=true">修改产品分类</Button>
                </div>
                  <i-col v-for="(item,index) in classificationTreeShow" >
                    <span class="tiy_key" style="text-align: left;font-size: 0.5em"  v-if="index<20||isShowAllCategories">{{item.level1}} /{{item.level2}}/{{item.level3}}</span>
                  </i-col>
                <div style="width: 100%;text-align: right;padding-right:9rem" v-if="classificationTreeShow.length>20">
                  <Button type="dashed" size="small" @click="isShowAllCategories=!isShowAllCategories">{{isShowAllCategories?'点我折叠全部分类......':'点我查看分类列表......'}}</Button>
                </div>
              </FormItem>
            </Row>
          </div>

          <div class="modal_base_div">
            <div class="modal_base_div_title"><strong>产品价格 :</strong></div>
            <Row>
              <i-col span="24">
                <FormItem v-for="(item, index) in param.paramProduct.priceList" required :key="index" :label-width="50">
                  <Row>
                    <strong>( 第 {{index+1}} 档 )</strong>&nbsp;&nbsp;&nbsp;&nbsp; 起订量 :&nbsp;&nbsp;
                    <InputNumber @on-blur="validateMin(index)" :ref="'min'+index" v-model="item.min" class="modal_newuser_form_input"></InputNumber>
                    &nbsp;&nbsp;及以上价格 ( $ ) ：
                    <InputNumber v-model="item.price" placeholder="价格" :ref="'input'+index"
                                 class="modal_newuser_form_input" @on-blur="validatePrice(index)"></InputNumber>
                    <Button @click="priceRemove(index)">删除</Button>
                  </Row>
                </FormItem>
                <Button type="info" ghost @click="priceAdd" icon="md-add" style="margin-left: 50px;">新增一档起订量与价格</Button>
              </i-col>
            </Row>

            <hr/>
            <div class="modal_base_div_title"> <strong>产品比价 : </strong>
              <i-switch v-model="param.paramProduct.comparePrice.isUploadComparePrice" :before-change="switchComparePrice"></i-switch></div>
            <div v-if="param.paramProduct.comparePrice.isUploadComparePrice">
              <Row  style="display: flex;justify-content: center; align-items: center">
                <KeyValueView title="平台一档售价">{{param.paramProduct.comparePrice.productPrice}}</KeyValueView><span></span>
                <KeyValueView title="其它平台价格 ($)">
                  <InputNumber v-model="param.paramProduct.comparePrice.otherPrice" ></InputNumber> <span></span>
                </KeyValueView>

                <Button @click="countRatio()" style="margin: 0 0.5rem">计算优惠幅度</Button>
                =>
                <InputNumber v-model="param.paramProduct.comparePrice.ratio" class="modal_newuser_form_input" style="margin: 0 0.5rem"
                             :precision=0 :formatter="value => `${value}%`" :parser="value => value.replace('%', '')"></InputNumber>

              </Row>

              <Row>
                <i-col span="20">
                  <FormItem label="其它平台截图：" style="margin-top: 1rem">
                    <Button type="primary" class="" @click="selectImages(false,false,8)">选择截图</Button>
                  </FormItem>
                </i-col>
              </Row>
              <Row v-if="param.paramProduct.comparePrice.images.length > 0">
                  <i-col span="4" v-for=" (item, index) in param.paramProduct.comparePrice.images">
                    <Card style="text-align: center;padding-top: 5px;margin: 0.5rem;max-width: 120px">
                      <img :src="yunPath+item.imagePath" style="max-width:100%;max-height:100%;" @click="showImage(yunPath+item.imagePath)"/>
                      <div slot="extra">
                          <span @click="deleteCompareImage(item.imagePath)">
                            <Button type="text" shape="circle" size="small" icon="ios-close-circle"></Button>
                          </span>
                      </div>
                    </Card>
                  </i-col>
              </Row>
            </div>
          </div>

          <div class="modal_base_div">
            <div class="modal_base_div_title"><strong>产品属性列表 :</strong></div>
            <Row>
              <i-col span="24">
                <FormItem v-for="(item, index) in param.paramProduct.argJson"
                  :key="index" :label="'#' + (index + 1) +''">
                  <Row>
                    属性名 :&nbsp;&nbsp; <Input type="text" v-model="item.name" style="width: 150px;"
                           class="modal_newuser_form_input"></Input>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    属性值 :&nbsp;&nbsp; <Input type="text" v-model="item.value" style="width: 300px;"
                           class="modal_newuser_form_input"></Input>
                    <Button  @click="propertyRemove(index)">删除</Button>
                  </Row>
                </FormItem>
                <Button type="info" ghost @click="propertyAdd" icon="md-add" style="width: 120px; margin-left: 50px;">新增属性</Button>
              </i-col>
            </Row>
          </div>

          <Row>
            <i-col span="24" style="margin-top: 50px">
              <div style="text-align: center">
                <Button class="tiy_btn"  @click="close" v-if="status.modalModify.closable">取消编辑并返回</Button>
                <Button type="primary" class="tiy_btn" @click="webModify" :loading="status.modalModify.isLoading">
                  保存产品概况
                </Button>
<!--                <Button type="primary" class="tiy_btn" @click="webModifyAndOnSale" :loading="status.modalModify.isLoading">-->
<!--                  保存并上架-->
<!--                </Button>-->
              </div>
            </i-col>
          </Row>
        </Form>
      </TabPane>

      <TabPane label="产品详情" :disabled="!status.modalModify.isEditDetail" name="productColor">
        <div class="modal_base_div" style="text-align: center">
          <div class="modal_base_div_title" style="margin-bottom: 10px"><strong>产品概要:</strong></div>
          <Row>
            <i-col span="12">
              <span>产品名称 : {{param.paramProduct.productName}}</span>
            </i-col>
            <i-col span="12">
              <span>产品 SKU : {{param.paramProduct.productCode}}</span>
            </i-col>
          </Row>
        </div>

        <Row>
          <i-col span="24" style="text-align: center; margin: 10px">
            <Button type="info" ghost style="width: 130px;margin-top: 20px" @click="productColorAdd" icon="md-add">新增一个色卡</Button>
          </i-col>
        </Row>
        <Row>
            <Button @click="sortColor"  type="primary" icon="md-reorder">
              色卡排序
            </Button>
        </Row>
        <!--表格和分页-->
<!--        <Table stripe border class="base_table" :columns="colorTableTitles"
               :data="tData.productColorList" no-data-text="暂无数据">
        </Table>-->
        <List style="border-top: 1px solid #e8eaec;border-bottom: 1px solid #e8eaec;margin-top: 1rem;margin-bottom: 1rem;">
          <template v-if="tData.productColorList.length == 0">
            <ListItem><div style="width: 100%; text-align: center;">暂无数据</div></ListItem>
          </template>
          <list-item class="list_item" v-for="(item,index) in tData.productColorList">
            <div style="width:100%;padding: 0 0.5rem;"  >
              <Row type="flex" justify="start" align="middle" >
                <i-col  :xs="10" :sm="3" style="text-align: center;margin-bottom: 1.5rem;" >
                  <KeyValueView oneline title="色卡名">{{item.colorName}}</KeyValueView>
                  <KeyValueView oneline title="是否默认">{{item.isDefault == 1 ? '是' : '否'}}</KeyValueView>
                  <KeyValueView oneline title="状态">{{item.state == 100?'已上架':(item.state == 200?'已下架':'回收站')}}</KeyValueView>
                </i-col>

                <i-col  :xs="7" :sm="3" style="text-align: center;" >
                  <KeyValueView title="" oneline >
                    <img :src="getMainColorImage(item)" style="width:99%;max-width:100px;max-height:100px;"
                         @click="showImage(yunPath+item.colorImage.originalImagePath)"/>
                  </KeyValueView>
                  <span >色卡主图</span>
                </i-col>

                <i-col  :xs="7" :sm="3" style="text-align: center;" >
                  <KeyValueView title="" oneline >
                    <img :src="item.iconImage==null?'':(yunPath + item.iconImage.originalImagePath)" style="width:99%;max-width:100px;max-height:100px;"
                         @click="showImage(yunPath+item.iconImage.originalImagePath)"/>
                  </KeyValueView>
                  <span >图标</span>
                </i-col>
                <i-col  :xs="24" :sm="8" style="text-align: left;" >

                  <KeyValueView v-if="isNotEmpty(item.detailImages)" title="" v-for="detail in item.detailImages">
                    <img :src="yunPath + detail.originalImagePath" style="width:99%;max-width:100px;max-height:100px;"
                         @click="showImage(yunPath+detail.originalImagePath)"/>
                  </KeyValueView>
                  <p v-if="isNotEmpty(item.detailImages)" style="text-align: center;">明细图</p>
                </i-col>
                <i-col  :xs="14" :sm="4" style="text-align: center;" >
                  <KeyValueView v-if="isNotEmpty(item.sizes)" title="库存"></KeyValueView><br>
                  <span v-if="isNotEmpty(item.sizes)"  v-for="size in item.sizes" >
                    <KeyValueView :title="size.sizeName">{{size.stock}}</KeyValueView><br>
                  </span>
                </i-col>

                <i-col :xs="10" :sm="3" >
                  <Button v-if="item.state != 300" ghost size="small" icon="md-flash" type="primary" @click="upOrDownColorItem(index)" >{{item.state == 100 ? '下架' : "上架"}}</Button>
                  <div style="margin-bottom: 0.5rem"></div>
                  <Button v-if="item.state != 300" ghost size="small" icon="md-create" type="error"  @click="productColorModify(index)" >编辑</Button>
                  <div style="margin-bottom: 0.5rem"></div>
                  <Button v-if="item.state != 300" ghost size="small" icon="md-trash" type="error"  @click="deleteColorItem(index)" >移入回收站</Button>
                  <tag v-if="item.state == 300" color="red">请先从回收站找回</tag>
                </i-col>
              </Row>
            </div>
          </list-item>
        </List>
      </TabPane>

      <TabPane label="产品货源" name="productSupply" :disabled="!status.modalModify.isEditDetail">
        <div class="modal_base_div" style="text-align: center">
          <div class="modal_base_div_title" style="margin-bottom: 10px"><strong>产品概要:</strong></div>
          <Row>
            <i-col span="12">
              <span>产品名称 : {{param.paramProduct.productName}}</span>
            </i-col>
            <i-col span="12">
              <span>产品 SKU : {{param.paramProduct.productCode}}</span>
            </i-col>
          </Row>
          <div v-if="isNotEmpty(param.paramProduct.collectionId)">
            <div class="modal_base_div_title" style="margin-top: 10px"><strong>导入货源:</strong></div>
            <Row>
              <i-col :span="24" style="text-align: left; padding-left: 10px; line-height: 25px;">
                <KeyValueView title="导入人" :value="productImportInfo.createUser"></KeyValueView>
                <KeyValueView title="导入时间" :value="$tiyBJTime(productImportInfo.createTime)"></KeyValueView>
                <KeyValueView title="采集人" :value="productImportInfo.originInfo.author"></KeyValueView>
                <KeyValueView title="采集重量" :value="productImportInfo.originInfo.weight+'g'" v-if="productImportInfo.originInfo.weight!=0"></KeyValueView>
                <KeyValueView title="采集分类" :value="productImportInfo.originInfo.categories.join('/')"></KeyValueView>
                <KeyValueView title="利润比" :value="productImportInfo.profitRatio+'%'" v-if="productImportInfo.profitRatio != 0"></KeyValueView>
                <div style="width: 100%;">
                  <div v-for="(item, index) in productImportInfo.originInfo.prices">
                    <span class="price-title">{{index==0?'采集价格':''}}</span><span class="price-grade">第{{index+1}}档：</span><span class="price-mount">起订量：{{item.begin}}</span><span class="price-value">价格：{{'$'+item.usdPrice}}</span>
                  </div>
                </div>
              </i-col>
            </Row>
          </div>
        </div>
        <Row>
          <i-col span="24" style="text-align: center;margin: 10px">
            <Button type="info" ghost style="width: 130px;margin-top: 20px" @click="addSupplyItem" icon="md-add">新增货源</Button>
            <Button type="info" ghost style="width: 130px;margin-top: 20px" @click="editProductOverstock" icon="md-add">维护积压库存</Button>
          </i-col>
        </Row>
<!--        <Table stripe border class="base_table" :columns="productSupplyTable"
               :data="tData.productSupplyList" no-data-text="暂无数据">
        </Table>-->
        <List border style="margin-top: 10px;">
          <template v-if="tData.productSupplyList.length == 0">
            <ListItem><div style="width: 100%; text-align: center;">暂无数据</div></ListItem>
          </template>
          <template v-else>
            <ListItem v-for="(item, index) in tData.productSupplyList" :key="index" class="list-item">
              <div class="item-top">
                <p style="font-weight: bold;">
                  <Tag :color="getSupplyColor(item.state)">{{getSupplyState(item.state)}}</Tag>
                  {{item.name}}
                </p>
              </div>
              <div class="item-content">
                <div>
                  <KeyValueView title="采购渠道" :value="getSupplySourceType(item.source)"></KeyValueView>
                  <KeyValueView title="采购链接">
                    <a :href="item.url" target="_blank">点击访问</a>
                  </KeyValueView>
                </div>
                <div>
                  <KeyValueView title="货源店铺" :value="item.shopName"></KeyValueView>
                  <KeyValueView title="参考价格" :value="item.referencePrice"></KeyValueView>
                </div>
                <div v-if="isCollectionLibSupply(item.source)">
                  <KeyValueView title="采集库产品编号" :value="item.productCollectionCode"></KeyValueView>
                </div>
              </div>
              <div class="item-bottom">
                <Button size="small" type="primary" @click="editSupplyItem(item)">编辑</Button>
                <Button size="small" type="error" @click="deleteSupplyItem(item.id)">删除</Button>
              </div>
            </ListItem>
          </template>
        </List>
      </TabPane>
    </Tabs>

    <!--新增色卡 弹出框-->
    <Modal
      :transfer=false
      v-model="status.modalColorModify.isShow"
      :title="status.modalColorModify.title"
      :mask-closable="false"
      @on-ok="productColorWebAddOrModify"
      :loading="status.modalColorModify.isLoading"
      class="color_modal"
      :styles="{top: '20px',bottom:'20px',width:'80%'}">
      <Form ref="paramProductColorSimple" :model="param.productColor" :rules="ruleProductColor" :label-width="100" class="modal_newuser_form">
        <div class="modal_base_div">
          <div class="modal_base_div_title"><strong>基本属性 :</strong></div>
          <Row>
            <i-col span="7">
              <FormItem label="色卡名称 : " prop="colorName">
                <Input v-model.trim="param.productColor.colorName" class="form_step"></Input>
              </FormItem>
            </i-col>
            <i-col span="7">
              <FormItem label="色卡中文名 : ">
                <Input v-model.trim="param.productColor.cnName" maxlength="45" class="form_step"></Input>
              </FormItem>
            </i-col>
            <i-col span="9" offset="1">
              <FormItem label="默认色卡 : " prop="isDefault">
                <Checkbox ref="checkDefaultColor" v-model="param.productColor.isDefault" :true-value=1 :false-value=0 :disabled="status.isCheckDefaultDisabled">
                 设置当前色卡为默认色卡
                </Checkbox>
                <input type="hidden" v-model="param.productColor.isDefault"></input>
              </FormItem>
            </i-col>
          </Row>
        </div>

        <div class="modal_base_div">
          <div class="modal_base_div_title"><strong>相关图片 :</strong></div>
          <Row>
            <i-col span="5">
              <FormItem label="色卡图标 : " prop="iconImage">
                <Button type="primary" class="" @click="selectImages(false,true,5)">
                  选择图片
                </Button>
              </FormItem>
              <FormItem label="" v-if="param.productColor.iconImage!=null && isNotEmpty(param.productColor.iconImage.originalImagePath)">
                <img :src="yunPath + param.productColor.iconImage.originalImagePath" height="80" style="border:dashed 1px #bdbdbd"
                     @click="showImage(yunPath + param.productColor.iconImage.originalImagePath)"/>
              </FormItem>
            </i-col>
            <i-col span="5">
              <FormItem label="色卡主图 : " prop="colorImage">
                <Button type="primary" class="" @click="selectImages(false,true,1)">
                  选择图片
                </Button>
              </FormItem>
              <FormItem label="" v-if="param.productColor.colorImage!=null && isNotEmpty(param.productColor.colorImage.originalImagePath)">
                <img :src="yunPath + param.productColor.colorImage.originalImagePath" height="80" style="border:dashed 1px #bdbdbd"
                     @click="showImage(yunPath + param.productColor.colorImage.originalImagePath)"/>
              </FormItem>
            </i-col>
            <i-col span="14">
              <FormItem label="明细图上传 : ">
                <Button type="primary" class="" @click="selectImages(false,false,3)">选择图片</Button>
                <span>拖动排序</span>
              </FormItem>
              <FormItem label="" v-if="param.productColor.detailImages!=null && param.productColor.detailImages.length>0">
                <Row>
                  <i-col span="6" v-for="(item,key) in param.productColor.detailImages" :key="key"
                         v-dragging="{item: item, list:param.productColor.detailImages, group: 'colorImage'}">
                    <Card class="item_card">
                      <Img  :src="yunPath + item.originalImagePath" width="100%" @click="showImage(yunPath + item.originalImagePath)"/>
                      <div slot="extra">
                        <span @click="colorDetailImageDelete(item)">
                          <Button type="text" shape="circle" size="small" icon="ios-close-circle" style="color: #9c27b0"></Button>
                        </span>
                      </div>
                    </Card>
                  </i-col>
                </Row>
              </FormItem>
            </i-col>
          </Row>
        </div>

        <div class="modal_base_div">
          <div class="modal_base_div_title"><strong>色卡尺码与库存 :</strong></div>
          <Row>
            <FormItem label="尺码选择:" prop="sysSizeIds" >
              <CheckboxGroup v-model="param.productColor.colorSizeIds" @on-change="colorSizeChange" >
                <Checkbox v-for="(size,key) in param.productColor.productSizes" :key="key"
                          :label="'{\'id\':\''+size.id+'\',\'name\':\''+size.sizeName+'\',\'selfDesignSize\':'+size.selfDesignSize+'}'">
                  <span>{{size.sizeName + getSysSizeTypeTitle(size.sysSizeType)}}</span>
                </Checkbox>
              </CheckboxGroup>
            </FormItem>
          </Row>
          <Row>
            <FormItem label="尺码库存:" prop="colorSizeSelected" >
              <Row>
                <div class="tiy_key">拖动可调整尺码展示的顺序</div>
                <i-col span="24"   v-for="(size,key) in param.productColor.colorSizeSelected" :key="key"
                       v-dragging="{item: size, list:param.productColor.colorSizeSelected, group: 'size' }" >
                     <span>{{size.sizeName}} 库存 :  </span>
                  <InputNumber v-model="size.stock" placeholder="请输入库存" :prefix="size.sizeName" :min="0" size="small"/>
                  <Button type="text" icon="ios-close-circle"  @click="deleteColorSizeStock(key)"></Button>
                </i-col>
              </Row>
            </FormItem>
          </Row>
        </div>
      </Form>
    </Modal>

    <!--查看图片弹出框-->
    <Modal
      :transfer=false
      v-model="status.modalImage.isShow"
      title=""
      :styles="{align:'center'}">
      <div slot="footer"></div>
      <div align="center"><Img :src="status.modalImage.url" style="max-width: 300px"/></div>
    </Modal>

    <!--图片选择框-->
    <Modal
      :transfer=false
      v-model="status.modalImageSelect.isShow"
      title="单击选择图片"
      :styles="{top: '20px',bottom:'20px',}"
      width="70%"
      height="1000">
      <div slot="footer"></div>
      <a-image :hideleft="true" @cancelClicked="status.modalImageSelect.isShow=false" @sureClicked="selectedImage"></a-image>
    </Modal>

    <!--自定义尺码弹出框-->
    <Modal
      :transfer=false
      v-model="status.modalCustomSizeModify.isShow"
      :title="status.modalCustomSizeModify.title"
      :mask-closable="false"
      @on-ok="addCustomSize"
      :loading="status.modalCustomSizeModify.isLoading">
      <Row>
        <i-col offset="4">
          <Form :model="param.customSize" :label-width="100" :rules="ruleCustomSize" ref="customSizForm" class="modal_newuser_form">
            <FormItem label="尺码名称 : " prop="name">
              <Input v-model.trim="param.customSize.name" placeholder="请输入" class="form_step"></Input>
            </FormItem>
            <FormItem label="排序号码 : " offset="4" >
              <InputNumber v-model.trim="param.customSize.sequence" :min=0 class="form_step"></InputNumber>
            </FormItem>
            <div class="tiy_key" style="text-align: center;width: 100%;"><span>排序号码越小代表该尺码在展示时越靠前</span></div>
          </Form>
        </i-col>
      </Row>
    </Modal>

    <!--确认重新生成尺码表-->
    <Modal
      :transfer=false
      v-model="status.createTableModal.isShow"
      :title="status.createTableModal.title"
      :loading="status.createTableModal.isLoading"
      @on-ok="createSizeTable">
      <br>
      <p>{{status.createTableModal.content}}</p>
      <br>
    </Modal>

    <Modal
      :transfer=false
      v-model="status.modalAction.isShow"
      :title="status.modalAction.title"
      :loading="status.modalAction.isLoading"
      @on-ok="webColorState">
      <br>
      <p>{{status.modalAction.content}}? </p>
      <br>
    </Modal>

    <!--产品分类选择-->
    <Modal
      :transfer=false
      v-model="isclassificationTreeModelShowing"
      title="修改产品所属的分类"
      @on-ok="">
      <div slot="footer">
      </div>
      <Tree :data="classificationTree" show-checkbox :multiple="true"
            ref="Tree"  @on-toggle-expand="toggleExpand"  @on-check-change="changeClassification">
      </Tree>
    </Modal>

    <!--色卡排序-->
    <Modal
      :transfer=false
      v-model="isSortShow"
      title="色卡排序"
      :styles="{top: '20px',bottom:'20px',width:'75%'}"
      @on-ok="doneSort">
      <Table stripe border class="base_table" :draggable="true" @on-drag-drop="colorDragging"
             :columns="colorSortTitles" :data="tData.productColorSortList" no-data-text="暂无数据">
      </Table>
    </Modal>

    <!-- 产品货源新增/编辑 -->
    <Modal :transfer=false v-model="status.supplyEditModal.isShow"
      :mask-closable="false" @on-ok="saveProductSupply" title="产品货源维护" :styles="{width:'70%'}">
      <i-col offset="2">
        <Form :model="param.productSupply" :label-width="100" ref="productSupplyForm" class="modal_newuser_form">
          <FormItem label="来源 : " offset="2" >
            <Select v-model="param.productSupply.source" class="form_step" :disabled="isCollectionLibSupply(param.productSupply.source)">
              <Option :value="1">手动-1688</Option>
              <Option :value="2">手动-淘宝</Option>
              <Option :value="3">手动-拼多多</Option>
              <Option :value="4">线下</Option>
              <Option :value="5" disabled>产品采集库</Option>
            </Select>
          </FormItem>
          <FormItem label="状态 : " prop="state">
            <Select v-model="param.productSupply.state" class="form_step">
              <Option :value=1>已上架</Option>
              <Option :value=2>已下架</Option>
            </Select>
          </FormItem>
          <FormItem label="名称 : " prop="name">
            <Input type="textarea" v-model.trim="param.productSupply.name" :autosize="true" class="modal_form_input" :disabled="isCollectionLibSupply(param.productSupply.source)"></Input>
          </FormItem>
          <FormItem label="货号 : " offset="2" >
            <Input type="text" v-model.trim="param.productSupply.artno" class="form_step"></Input>
          </FormItem>
          <FormItem label="采购链接 : " offset="2" >
            <Input type="url" v-model.trim="param.productSupply.url" class="modal_form_input" :disabled="isCollectionLibSupply(param.productSupply.source)"></Input>
          </FormItem>
          <FormItem label="参考价格 : " offset="2" >
            <Input type="number" v-model.trim="param.productSupply.referencePrice" class="form_step"></Input>
          </FormItem>
          <FormItem label="抓取价格区间: " offset="2" v-if="param.productSupply.priceRange">
            <ul>
              <li v-for="(price) in $toJson(param.productSupply.priceRange)" style="list-style-type:none;">
              <label>{{price.begin}} - {{price.end}} : ¥{{price.price}}</label>
              </li>
            </ul>
          </FormItem>
          <FormItem label="货源店铺 : " offset="2" prop="shopName">
            <Input v-model.trim="param.productSupply.shopName" class="modal_form_input" :disabled="isCollectionLibSupply(param.productSupply.source)"></Input>
          </FormItem>
        </Form>
      </i-col>
    </Modal>

    <!-- 产品积压库存 -->
    <Modal :transfer=false v-model="status.productOverstockModal.isShow" :mask-closable="false"
           @on-ok="saveProductOverstock" title="产品积压库存" :styles="{width:'70%'}">
      <Table stripe border class="base_table" :columns="productOverstockTable" :data="tData.productOverstock"
             :span-method="spanProductOverstock" no-data-text="暂无数据"></Table>
    </Modal>

  </div>
</template>

<!--javascript 代码-->
<script>
  import tiyData from "./js/list/add_edit_data"
  import AImage from "../image/ImageSelect.vue"
  import tiyDataImage from "../image/js/select/image_data"
  import {getProductCommonData, createCategoryList, imageSizeModal, isNotEmpty} from "../js/commonUtils"
  import SizeTableTransform from "../impProduct/sizeTableTransform/SizeTableTransform";

  import {
    imageInit,
    webImageList,
  } from "../image/js/select/image_funs"
  import {
    productColorAdd,
    productColorModify,
    productColorWebAddOrModify,
    webModify,
    createSizeTableTitles,
    createSizeTableData,
    getProductSizes,
    action,
    webColorState,
    colorToRecycle,
    colorSort,
    getProductSupplys,
    deleteProductSupply,
    saveProductSupply,
    getProductOverstock,
    saveProductOverstock
  } from  "./js/list/add_edit_fun"
  import KeyValueView from "../widgets/KeyValueView";
  import Vue from "vue";

  export default {
    // components: {draggable},
    data(){
      return {
        tData:tiyData.tData,
        //字典 性q别
        sexList: this.$store.getters.dictionaries.genderDict,
        allTabs: this.$store.getters.product.allTabs,
        allShops: tiyData.tData.allShops,
        allSysSize: tiyData.tData.allSysSize,//尺码
        allSysSizeMap:this.$store.getters.product.allSysSize,
        sysSizeTypeDict: this.$store.getters.dictionaries.sysSizeTypeDict,//尺码类型
        classificationTree: tiyData.tData.classificationTree,//分类
        productColorList: tiyData.tData.productColorList,
        uploadUrl:this.$apiProduct.getUploadUrl(),
        //字典 计价单位
        priceUnits: this.$store.getters.dictionaries.priceUnits,
        colorTableTitles: [
          tiyData.tTable.colorTableTitles.columnColor,
          tiyData.tTable.colorTableTitles.columnIconImage,
          tiyData.tTable.colorTableTitles.columnColorImage,
          tiyData.tTable.colorTableTitles.columnDefault,
          tiyData.tTable.colorTableTitles.columnState,
          tiyData.tTable.colorTableTitles.columnDetailImgs,
          tiyData.tTable.colorTableTitles.columnSizeStock,
          tiyData.tTable.colorTableTitles.columnEdit1(this),
        ],
        colorSortTitles:[
          {
            title:"序号",
            type:'index',
            width:70
          },
          tiyData.tTable.colorTableTitles.columnColor,
          tiyData.tTable.colorTableTitles.columnIconImage,
          tiyData.tTable.colorTableTitles.columnColorImage,
          tiyData.tTable.colorTableTitles.columnDefault,
          tiyData.tTable.colorTableTitles.columnState,
          tiyData.tTable.colorTableTitles.columnDetailImgs,
          {
            title: '库存',
            key: 'sizeStock',
            width: 140,
            render: (h, params) => {
              let sizeStock = [];
              if ('' != params.row.sizes) {
                params.row.sizes.forEach(function (item) {
                  sizeStock.push(h('li',
                    [h('div', {
                      style:{'padding-left':'5px','text-align': 'left'},
                    },item.sizeName+':'+item.stock)]));
                });
              }
              return h('div',{style:{width:'100%'}},[h('ul', {style: { 'list-style':'none',margin: '0px',padding: '0px',}}, sizeStock)]);
            },
            align: 'center'
          }
        ],
        param: tiyData.tParam,
        status: tiyData.tStatus,
        ruleProduct: tiyData.tStatus.rules,
        ruleProductColor: tiyData.tStatus.colorRules,
        ruleCustomSize:tiyData.tStatus.ruleCustomSize,
        yunPath: this.$store.getters.imgPrefix,
        sizeTableTitles:tiyData.tTable.sizeTableTitles,
        productSizeDetail:tiyData.tData.productSizeDetail,
        //色卡新增可选规格
        productSizes:tiyData.tParam.productColor.productSizes,
        productSizeChangeState:false,//重新选择了尺码
        classificationTreeShow:tiyData.tData.classificationTreeShow,
        classificationIds:tiyData.tParam.paramProduct.classificationIds,
        isclassificationTreeModelShowing :false,
        isShowAllCategories:false,
        isSortShow:false,
        productSupplyTable: tiyData.productSupplyTable(this),
        productOverstockTable : tiyData.productOverstockTable(this),
        imageList: [],
        imageListLength: 0,
        allManageTabs: this.$store.getters.product.allManageTabs,
        productImportInfo: tiyData.tData.productImportInfo,
      }
    },
    methods: {
      //获取色卡主图
      getMainColorImage(color){
        let self=this;
        let imageUrl = color.colorImage==null?"":(self.yunPath + color.colorImage.originalImagePath);
        if(color.colorImage!=null&&color.colorImage.zipImgs!=null){
          let zipImg = color.colorImage.zipImgs;
          zipImg.forEach(function (item){
            if(item.size=="200w"){
              imageUrl=self.yunPath+item.imagePath;
            }
          })
        }
        return !imageUrl ? '' : imageUrl;
      },
      isNotEmpty(val) {
        return isNotEmpty(val);
      },
      getSupplySourceType(source) {
        switch (source) {
          case 1:
            return "1688";
          case 2:
            return "淘宝";
          case 3:
            return "拼多多";
          case 4:
            return "线下";
          case 5:
            return "产品采集库";
          default:
            return "";
        }
      },
      getSupplyColor(state) {
        switch (state) {
          case 1:
            return "success";
          case 2:
            return "gray";
          default:
            return "info";
        }
      },
      getSupplyState(state) {
        switch (state) {
          case 1:
            return "已上架";
          case 2:
            return "已下架";
          default:
            return "";
        }
      },
      isCollectionLibSupply(source) {
        return source == 5;
      },
      webModifyAndOnSale() {
        tiyData.tParam.paramProduct.productState = 0; //上架
        webModify(this, tiyData, 'paramProductSimple');
      },
      webModify(){
        webModify(this, tiyData, 'paramProductSimple');
      },
      productColorAdd(){
        productColorAdd(this,tiyData)
      },
      productColorWebAddOrModify(){
        productColorWebAddOrModify(this, tiyData, 'paramProductColorSimple');
      },
      showSelectShop(){
        tiyData.tStatus.modalModify.isShowShop = !tiyData.tStatus.modalModify.isShowShop;
      },
      toggleExpand(data){
        //展开分类，关闭同一级分类
        if(data.expand && data.level==1){
          tiyData.tData.classificationTree.forEach(function(item,index){
            if(data.value!=item.value&&item.expand==true){
              item.expand=false;
              this.classificationTree.splice(index,1,item)
            }
          });
        }
      },
      categorySelected(value, selectedData){
        if (0 < selectedData.length) {
          if (1 < selectedData.length) {
            tiyData.tParam.choosed_classify = selectedData[selectedData.length - 1].value;
          }
        } else {
          tiyData.tParam.choosed_classify = '';
        }
      },
      propertyAdd () {
        tiyData.tParam.paramProduct.argJson.push({
          name: '',
          value: '',
        });
      },
      priceAdd () {
        tiyData.tParam.paramProduct.priceList.push({
          min: null,
          price:0,
        });
      },
      priceRemove(index){
        tiyData.tParam.paramProduct.priceList.splice(index, 1);
      },
      propertyRemove (index) {
        tiyData.tParam.paramProduct.argJson.splice(index, 1);
      },
      showImage(imageUrl){
        tiyData.tStatus.modalImage.url = imageUrl;
        tiyData.tStatus.modalImage.isShow = true;
      },
      colorDetailImageDelete(imageUrl){
        tiyData.tParam.productColor.detailImages.forEach(function (item, index) {
          if (item == imageUrl) {
            tiyData.tParam.productColor.detailImages.splice(index, 1);
          }
        });
      },
      mainImageDelete(imageUrl){
        tiyData.tParam.paramProduct.mainImages.forEach(function (item, index) {
          if (item == imageUrl) {
            tiyData.tParam.paramProduct.mainImages.splice(index, 1);
          }
        });
      },
      detailImageDelete(imageUrl){
        tiyData.tParam.paramProduct.detailImages.forEach(function (item, index) {
          if (item == imageUrl) {
            tiyData.tParam.paramProduct.detailImages.splice(index, 1);
          }
        });
      },
      deleteVideo(item){
        let index=tiyData.tParam.paramProduct.videos.indexOf(item);
        if(index!=-1){
          tiyData.tParam.paramProduct.videos.splice(index,1)
        }



      },
      selectImages(showChooseSingle, isSingle, type){
        //type 0:橱窗图 单 6: 产品主图 多 7 :产品明细图 多  1:色卡样式图 单  3:色卡明细图上传 多  5：色卡图标 单,4尺码图, 8 比价图
        imageInit(this, tiyDataImage, showChooseSingle, isSingle, 1);
        tiyData.tStatus.selectImageType = type;
        tiyDataImage.tParams.folderList.productCode = tiyData.tParam.paramProduct.productCode;
        tiyDataImage.tParams.folderList.folderName = tiyData.tParam.paramProduct.productCode;
        tiyData.tStatus.modalImageSelect.isShow = true;
        webImageList(this, tiyDataImage);
      },
      selectedImage(selectedImages){
        this.status.modalImageSelect.isShow = false;
        let self = this;
        let paramProduct = tiyData.tParam.paramProduct;
        // let selectedImages = tiyDataImage.tData.folderList.filter(folder => folder.isChecked == true);
        switch (tiyData.tStatus.selectImageType) {
          //type 0:橱窗图 单 6: 产品主图 多 7 :产品明细图 多   1:色卡主图 单   3:色卡明细图上传 多 5：色卡图标 单  4：尺码图, 8 比价图
          case 0:
            if (tiyDataImage.tStatus.isSingle && 0 < selectedImages.length) {
              paramProduct.showImage.yunFileId = selectedImages[0].id;
              paramProduct.showImage.sequence = 0;
              paramProduct.showImage.originalImagePath = selectedImages[0].yunKey;
              paramProduct.showImage.originalImageUrl = self.yunPath +selectedImages[0].yunKey;
              paramProduct.showImage200w=self.yunPath +selectedImages[0].yunKey;
            }
            break;
          case 1:
            if (tiyDataImage.tStatus.isSingle && 0 < selectedImages.length) {
              tiyData.tParam.productColor.colorImage.yunFileId = selectedImages[0].id;
              tiyData.tParam.productColor.colorImage.sequence = 0;
              tiyData.tParam.productColor.colorImage.originalImagePath = selectedImages[0].yunKey;
              tiyData.tParam.productColor.colorImage.originalImageUrl = self.yunPath +selectedImages[0].yunKey;
              tiyData.tParam.productColor.colorImage.width = selectedImages[0].width;
              tiyData.tParam.productColor.colorImage.height = selectedImages[0].height;
            }
            break;
          case 3:
            if (!tiyDataImage.tStatus.isSingle && 0 < selectedImages.length) {
              selectedImages.forEach(function (item) {
                let find = false;
                let imgUrl = item.yunKey;
                for(var i = 0 ; i < tiyData.tParam.productColor.detailImages.length; i++){
                  if(imgUrl == tiyData.tParam.productColor.detailImages[i].originalImagePath){
                    find = true;
                    break;
                  }
                }
                if(find == false){
                  let detailImage={
                      yunFileId:selectedImages[0].id,
                      originalImagePath:imgUrl,
                      originalImageUrl : self.yunPath +imgUrl,
                      width :  item.width,
                      height :  item.height,
                  }
                  tiyData.tParam.productColor.detailImages.push(detailImage);
                }
              });
            }
            break;
          case 4:
            if (!tiyDataImage.tStatus.isSingle && 0 < selectedImages.length) {
              selectedImages.forEach(function (item,index) {
                let find = false;
                let imgUrl = item.yunKey;
                for(var i = 0 ; i < paramProduct.productSizeImages.length; i++){
                  if(imgUrl == paramProduct.productSizeImages[i].url){
                    find = true;
                    break;
                  }
                }
                if(find == false){
                  let sizeImg={'url':item.yunKey,'width':item.width,'height':item.height,'sequence':index};
                    paramProduct.productSizeImages.push(sizeImg);
                }
              });
            }
            break;
          case 5:
            if (tiyDataImage.tStatus.isSingle && 0 < selectedImages.length) {
              tiyData.tParam.productColor.iconImage.yunFileId = selectedImages[0].id;
              tiyData.tParam.productColor.iconImage.sequence = 0;
              tiyData.tParam.productColor.iconImage.originalImagePath = selectedImages[0].yunKey;
              tiyData.tParam.productColor.iconImage.originalImageUrl = self.yunPath +selectedImages[0].yunKey;
              tiyData.tParam.productColor.iconImage.width = selectedImages[0].width;
              tiyData.tParam.productColor.iconImage.height = selectedImages[0].height;
            }
            break;
          case 6:
            if (!tiyDataImage.tStatus.isSingle && 0 < selectedImages.length) {
              selectedImages.forEach(function (item) {
                let find = false;
                let imgUrl = item.yunKey;
                for(var i = 0 ; i < paramProduct.mainImages.length; i++){
                  if(imgUrl == paramProduct.mainImages[i].originalImagePath){
                    find = true;
                    break;
                  }
                }
                if(find == false){
                  let mainImage={
                    yunFileId:selectedImages[0].id,
                    originalImagePath:imgUrl,
                    originalImageUrl : self.yunPath +imgUrl,
                    zipImg:imgUrl,
                  }
                    paramProduct.mainImages.push(mainImage);
                }
              });
            }
            break;
          case 7:
            if (!tiyDataImage.tStatus.isSingle && 0 < selectedImages.length) {
              selectedImages.forEach(function (item) {
                let find = false;
                let imgUrl = item.yunKey;
                for(let i = 0 ; i < paramProduct.detailImages.length; i++){
                  if(imgUrl == paramProduct.detailImages[i].originalImagePath){
                    find = true;
                    break;
                  }
                }
                if(find == false){
                  let detailImage={
                    yunFileId:selectedImages[0].id,
                    originalImagePath:imgUrl,
                    originalImageUrl : self.yunPath +imgUrl,
                  }
                  paramProduct.detailImages.push(detailImage);
                }
              });
            }
            break;
          case 8:
            if (!tiyDataImage.tStatus.isSingle && 0 < selectedImages.length) {
              selectedImages.forEach(function (item,index) {
                let find = false;
                let imgUrl = item.yunKey;
                for(let i = 0 ; i < paramProduct.comparePrice.images.length; i++){
                  if(imgUrl == paramProduct.comparePrice.images[i].imagePath){
                    find = true;
                    break;
                  }
                }
                if(find == false){
                  let priceImg = {'imagePath':item.yunKey,'width':item.width,'height':item.height,'sequence':index,'yunFileId':item.id};
                  paramProduct.comparePrice.images.push(priceImg);
                }
              });
            }
            break;
          default:
            break;
        }
      },
      close(){
        this.status.modalModify.isShow = false;
      },
      checkedCategory(categories){
        tiyData.tParam.paramProduct.categoryIds = categories;
      },
      chooseTab(tabName){
        tiyData.tParam.productTabs = tabName;
        if(tabName=='productColor'){
          getProductSizes(this,tiyData);
        } else if(tabName == "productSupply"){
          getProductSupplys(this,tiyData);
        }
      },
      changeSysSizeType(label){
        this.$ySpliceAll(tiyData.tParam.paramProduct.sysSizeIds);
        if(tiyData.tParam.sysSizeTypeChange == 0){
            tiyData.tParam.sysSizeTypeChange=1;
        }
        if(tiyData.tParam.paramProduct.sysSizeType==0){
            tiyData.tParam.paramProduct.sysSizeIds.push(this.allSysSizeMap[0][0].id);
            //尺码详情表
            this.$ySpliceAll(tiyData.tData.productSizeDetail,tiyData.tTable.sizeTableTitles,tiyData.tParam.paramProduct.customSize);
            tiyData.tParam.productSizeTable.rowCount=0;
            tiyData.tParam.productSizeTable.columnCount=0;
            tiyData.tParam.productSizeTable.title='';
            tiyData.tParam.productSizeTable.subTitle='';
        }
      },
      customSizeAdd(){
        tiyData.tStatus.modalCustomSizeModify.isShow=true;
      },
      addCustomSize(){
        let flag = true;
        tiyData.tParam.paramProduct.customSize.forEach(
          function(item){
            if(item.name===tiyData.tParam.customSize.name){
              flag=false;
            }
          }
        );
        this.$refs['customSizForm'].validate((valid) => {
          if (valid) {
            tiyData.tParam.paramProduct.customSize.push({id:tiyData.tParam.customSize.id, name:tiyData.tParam.customSize.name,sequence:tiyData.tParam.customSize.sequence});
            tiyData.tParam.paramProduct.customSize = self._.orderBy(tiyData.tParam.paramProduct.customSize,'sequence','asc');

            tiyData.tParam.customSize.name='';
            tiyData.tParam.customSize.sequence=0;
            tiyData.tStatus.modalCustomSizeModify.isLoading=false;
            tiyData.tStatus.modalCustomSizeModify.isShow=false;
            setTimeout(() => {
              this.$nextTick(function () {
                tiyData.tStatus.modalCustomSizeModify.isLoading=true;
              });
            }, 1000);
          }else{
            setTimeout(() => {
              tiyData.tStatus.modalCustomSizeModify.isLoading=false;
              this.$nextTick(function () {
                tiyData.tStatus.modalCustomSizeModify.isLoading=true;
              });
            }, 2000);
          }
        })
      },
      changeSysSizeData(result){
        this.productSizeChangeState = true;
      },
      handleClose(index) {
        tiyData.tParam.paramProduct.customSize.splice(index, 1);
      },
      createSizeTable(){
        if( tiyData.tParam.productSizeTable.rowCount>0&& tiyData.tParam.productSizeTable.columnCount>0){
          createSizeTableTitles(this, tiyData);
          createSizeTableData(tiyData);
        }else{
          tiyData.tParam.productSizeTable.rowCount=0;
          tiyData.tParam.productSizeTable.columnCount=0;
        }
        tiyData.tStatus.createTableModal.isShow=false;
        tiyData.tStatus.createTableModal.isLoading=false;
      },
      addColumn(){
        tiyData.tParam.productSizeTable.columnCount = tiyData.tTable.sizeTableTitles.length;
        createSizeTableTitles(this, tiyData);
      },
      addRow(){
        let columnCount = tiyData.tParam.productSizeTable.columnCount;
        let row={};
        for(let j=0;j<columnCount;j++ ){
          let name='第 '+(j+1)+' 列';
          row[name]='';
        }
        tiyData.tParam.productSizeTable.rowCount = parseInt(tiyData.tParam.productSizeTable.rowCount)+1;
        tiyData.tData.productSizeDetail.splice(tiyData.tData.productSizeDetail.length, 0, row);
        createSizeTableTitles(this, tiyData);
      },
      colorSizeChange(sizeData){
        sizeData.forEach(function(item){
          let isHaven = false ;
          let sizeItem = eval('(' + item + ')');
          tiyData.tParam.productColor.colorSizeSelected.forEach(function (selectedItem) {
            if(selectedItem.id == sizeItem.id){
              isHaven = true
            }
          });
          if(!isHaven){
            tiyData.tParam.productColor.colorSizeSelected.push({id:sizeItem.id,sizeName:sizeItem.name,stock:100000,selfDesignSize:sizeItem.selfDesignSize});
          }
        })
      },
      showCreateTable(){
        tiyData.tStatus.createTableModal.isShow=true;
        tiyData.tStatus.createTableModal.isLoading=true;
      } ,
      productColorModify(index){
        productColorModify(this, tiyData, index);
      },
      upOrDownColorItem(index){
        let color = tiyData.tData.productColorList[index];
        if(color.isDefault&&color.state==100){
          this.$Modal.error({content:"默认色卡不能下架"});
          return;
        }
        action(this, tiyData, 7, index);
      },
      deleteColorItem(index){
        let color = tiyData.tData.productColorList[index];
        if(color.isDefault&&color.state==100){
          this.$Modal.error({content:"默认色卡不能删除"});
          return;
        }
        action(this, tiyData, 8, index);
      },
      webColorState(){
        if(tiyData.tStatus.modalAction.productColor.state == 300){
          colorToRecycle(this, tiyData);
        } else {
          webColorState(this, tiyData);
        }
      },
      uploadImageSuccess(response, file, fileList){
        this.$Spin.hide();
        if(response.success){
            this.param.paramProduct.listImgUrl=response.result;
            let name = this.param.paramProduct.listImgUrl.substring(this.param.paramProduct.listImgUrl.lastIndexOf("/")+1, this.param.paramProduct.listImgUrl.length);
            imageSizeModal(this, [{name: name, url: this.yunPath+this.param.paramProduct.listImgUrl}]);
        } else {
            this.$Message.error('上传图片失败！' + response.errorMessage) ;
        }
      },
      uploadSizeImageSuccess(response, file, fileList){
        let self = this;
        if(response.success){
          response.result.forEach(function(item){
            tiyData.tParam.paramProduct.productSizeImages.push(item);
            let name = item.url.substring(item.url.lastIndexOf("/")+1, item.url.length);
            self.imageList.push({name: name, url: self.yunPath + item.url})
          });
          if(this.imageList.length == this.imageListLength) { //全部上传完毕
            this.$Spin.hide(); //隐藏遮罩层
            imageSizeModal(this, this.imageList); //图片尺寸提示
            this.imageList = []; //上传图片数组清空
            this.imageListLength = 0; //上传图片数组长度重设为0
          }
        } else {
            this.$Message.error('上传图片失败！' + response.errorMessage) ;
        }
      },
      uploadImageError(error, file, fileList){
        this.$Spin.hide();
      },
      uploadImageProgress(event, file, fileList){
        this.$Spin.show();
      },
      deleteColorSizeStock(key){
        tiyData.tParam.productColor.colorSizeSelected.splice(key,1);
      },
      deleteSizeImage(imageUrl){
        tiyData.tParam.paramProduct.productSizeImages.forEach(function (item, index) {
          if (item.url == imageUrl) {
            tiyData.tParam.paramProduct.productSizeImages.splice(index, 1);
          }
        });
      },
      validatePrice(index){
        let price = this.param.paramProduct.priceList[index].price;
        let priceLength = this.param.paramProduct.priceList.length;
        if(index>0){
          let prePrice = this.param.paramProduct.priceList[index-1].price;
          if(price>=prePrice){
            this.$Message.error('价格不能高于上一档价格') ;
            let resPrice={min:this.param.paramProduct.priceList[index].min,price:''};
            this.param.paramProduct.priceList.splice(index,1,resPrice);
            this.$refs['input'+index][0].focus();
          }
        } else if(index == 0){
            this.param.paramProduct.comparePrice.productPrice = price;
        }
        if(priceLength-1>index){
          let afPrice = this.param.paramProduct.priceList[index+1].price;
          if(afPrice!=''&&price<=afPrice){
            this.$Message.error('价格不能低于下一档价格') ;
            let resPrice={min:this.param.paramProduct.priceList[index].min,price:''};
            this.param.paramProduct.priceList.splice(index,1,resPrice);
            this.$refs['input'+index][0].focus();
          }
        }
      },
      validateMin(index){
        let min = this.param.paramProduct.priceList[index].min;
        let minLength = this.param.paramProduct.priceList.length;
        if(index>0){
          let preMin = this.param.paramProduct.priceList[index-1].min;
          if(min<=preMin){
            this.$Message.error('起订量不能低于上一档') ;
            let resPrice={min:null,price:this.param.paramProduct.priceList[index].price};
            this.param.paramProduct.priceList.splice(index,1,resPrice);
            this.$refs['min'+index][0].focus();
            return;
          }
        }

        if(minLength-1>index){
          let afMin = this.param.paramProduct.priceList[index+1].min;
          if(afMin!=''&&min>=afMin){
            this.$Message.error('起订量不能高于下一档') ;
            let resPrice={min:null,price:this.param.paramProduct.priceList[index].price};
            this.param.paramProduct.priceList.splice(index,1,resPrice);
            this.$refs['min'+index][0].focus();
          }
        }

      },
      changeClassification(){
        tiyData.tData.classificationTreeShow.splice(0,tiyData.tData. classificationTreeShow.length);
        let level1 = this.$refs.Tree.getCheckedAndIndeterminateNodes().filter(item=>item.level==1);
        tiyData.tParam.paramProduct.classificationIds = [];
        this.$refs.Tree.getCheckedNodes().forEach(function(item){
          if(item.level==3){
            tiyData.tParam.paramProduct.classificationIds.push(item.value);
          }
        })
        this.$refs.paramProductSimple.validateField('classificationIds');
        level1.forEach((item1)=>{
          item1.children.forEach((item2)=>{
            if(item2.checked||item2.indeterminate){//2级分类选中或者半选
              item2.children.forEach((item3)=>{//3级分类选中
                if(item3.checked){
                  tiyData.tData.classificationTreeShow.push({'level1':item1.title,level2:item2.title,level3:item3.title});
                }
              });
            }
          });
        });
      },
      colorDragging(index1,index2){
        //默认色卡不参与排序
        if(index1==0 || index2==0){
          this.$Message.error("默认色卡不参与排序");
          return;
        }
        let preObj = tiyData.tData.productColorSortList[index1];
        tiyData.tData.productColorSortList.splice(index1,1);
        tiyData.tData.productColorSortList.splice(index2,0,preObj);
        tiyData.tData.productColorSortList.forEach(function(item,index){
            item.sequence1 = index;
        })
      },
      sortColor(){
        this.isSortShow = true;
        tiyData.tData.productColorSortList.splice(0,tiyData.tData.productColorSortList.length)
        tiyData.tData.productColorList.forEach(function(item){
          let sortColor = item;
          tiyData.tData.productColorSortList.push(sortColor)
        });
      },
      doneSort(){
        colorSort(this,tiyData)
      },
      addSupplyItem(){
        tiyData.tStatus.supplyEditModal.isNew = true;
        tiyData.tStatus.supplyEditModal.isShow = true;
        tiyData.tParam.productSupply.id = "";
        tiyData.tParam.productSupply.source = 1;
        tiyData.tParam.productSupply.name = "";
        tiyData.tParam.productSupply.artno = "";
        tiyData.tParam.productSupply.url = "";
        tiyData.tParam.productSupply.referencePrice = 0;
        tiyData.tParam.productSupply.priceRange = "";
        tiyData.tParam.productSupply.productId = tiyData.tParam.paramProduct.id;
        tiyData.tParam.productSupply.shopName = "";
        tiyData.tParam.productSupply.state = 1;
        tiyData.tParam.productSupply.productCollectionId = "";
        tiyData.tParam.productSupply.productCollectionCode = "";
      },
      editSupplyItem(supply){
        tiyData.tStatus.supplyEditModal.isNew = false;
        tiyData.tParam.productSupply.id = supply.id;
        tiyData.tParam.productSupply.source = supply.source;
        tiyData.tParam.productSupply.name = supply.name;
        tiyData.tParam.productSupply.artno = supply.artno;
        tiyData.tParam.productSupply.url = supply.url;
        tiyData.tParam.productSupply.referencePrice = supply.referencePrice;
        tiyData.tParam.productSupply.priceRange = supply.priceRange;
        tiyData.tParam.productSupply.productId = supply.productId;
        tiyData.tParam.productSupply.shopName = supply.shopName;
        tiyData.tParam.productSupply.state = supply.state;
        tiyData.tParam.productSupply.productCollectionId = supply.productCollectionId;
        tiyData.tParam.productSupply.productCollectionCode = supply.productCollectionCode;
        tiyData.tStatus.supplyEditModal.isShow = true;
      },
      deleteSupplyItem(supplyId){
        this.$Modal.confirm({
          title: "确认",
          content: "确定要删除此货源吗？",
          onOk() {
            deleteProductSupply(this, tiyData, supplyId);
          }
        })
      },
      saveProductSupply(){
        saveProductSupply(this, tiyData);
      },
      editProductOverstock(){
        getProductOverstock(this, tiyData);
        tiyData.tStatus.productOverstockModal.isShow = true;
      },
      saveProductOverstock(){
        saveProductOverstock(this, tiyData);
      },
      spanProductOverstock({ row, column, rowIndex, columnIndex }){ //合并积压库存色卡列
        let mergeCol = tiyData.tData.productOverstockSpan[rowIndex];
        if(columnIndex == 1 || columnIndex == 2 || columnIndex == 3){
          return {
            rowspan: mergeCol === 0 ? 0 : mergeCol,
            colspan: mergeCol === 0 ? 0 : 1
          };
        }
      },
      changeHasSizeTable(){
        if(!tiyData.tParam.paramProduct.hasSizeTable){
          tiyData.tParam.productSizeTable.title = "";
          tiyData.tParam.productSizeTable.subTitle = "";
          tiyData.tParam.productSizeTable.rowCount = 0;
          tiyData.tParam.productSizeTable.columnCount = 0;
          this.$ySpliceAll(tiyData.tData.productSizeDetail);
        }
      },
      nameFirstUpperCase(){
        tiyData.tParam.paramProduct.productName = this.$yFirstUpperCase(this.param.paramProduct.productName).ResetBlank();
      },
      beforeUpload(image) {
        this.imageListLength++;
        return true;
      },
      getSysSizeTypeTitle(type){ //返回系统尺码类型的名称
          let sizeType = this.sysSizeTypeDict.filter(item => item.value == type)[0];
          if(sizeType){
              return "（" + sizeType.name + "）";
          }
          return "";
      },
      changeSizeTableType() {
        this.param.paramProduct.hasSizeTable = this.param.paramProduct.sizeTableType == 1 || this.param.paramProduct.sizeTableType == 2;
        this.param.paramProduct.useTranslateSizeTableTool = this.param.paramProduct.sizeTableType == 2;
      },
      switchComparePrice(){ //切换产品比价开关
        let comparePrice = tiyData.tParam.paramProduct.comparePrice;
            return new Promise((resolve) => {
                if (comparePrice.isUploadComparePrice){
                    this.$Modal.confirm({
                        title: "提示",
                        content: "<div><span>关闭价格比价将清空已经设置的比率和比价图片，是否继续？</span></div>",
                        okText: "确定",
                        cancelText: "取消",
                        closable: true,
                        zIndex: 1,
                        onOk: () => {
                            comparePrice.isUploadComparePrice = !comparePrice.isUploadComparePrice;
                            comparePrice.ratio = 0;
                            comparePrice.images = [];
                        }
                    });
              } else {
                  comparePrice.isUploadComparePrice = !comparePrice.isUploadComparePrice;
                  this.initComparePriceData();
              }
    });
    // }
    },
    deleteCompareImage(imageUrl){
        let compareImgs = tiyData.tParam.paramProduct.comparePrice.images;
        compareImgs.forEach(function (item, index) {
            if (item.imagePath == imageUrl) {
                compareImgs.splice(index, 1);
            }
        });
    },
    initComparePriceData(){
        this.param.paramProduct.comparePrice.otherPrice = 0;
        if(this.param.paramProduct.priceList && this.param.paramProduct.priceList[0]){
            this.param.paramProduct.comparePrice.productPrice = this.param.paramProduct.priceList[0].price;
        } else {
            this.param.paramProduct.comparePrice.productPrice = 0;
        }
    },
    countRatio(){ //计算比价
        let comparePrice = this.param.paramProduct.comparePrice;
        if(!comparePrice.productPrice || !comparePrice.otherPrice){
            this.$Message.error("缺少一档产品价格或者其它平台价格！");
            return;
        }
        if(comparePrice.productPrice >= comparePrice.otherPrice){
            this.$Message.error("其它平台价格不能低于产品一档价格！");
            return;
        }
        let cheaper = comparePrice.otherPrice - comparePrice.productPrice;
        comparePrice.ratio = (cheaper/comparePrice.otherPrice).toFixed(2)*100;
    },
      formatDate(d, fmt) {
        return Vue.prototype.$tiyBJTime(d)
      },
  },
  computed:{
      pCode:{
          get: function(){
              return this.param.paramProduct.productCode.toUpperCase()
          },
          set : function(val){
              this.param.paramProduct.productCode = val.toUpperCase();
          }
      }
  },
  components: {
      KeyValueView,
          AImage,
          SizeTableTransform,
  },
  mounted(){
      this.productSizeChangeState = false;

      //产品导入查询分类、标签和尺码
      let types = [];
      types.push(1);
      types.push(2);
      types.push(3);
      types.push(4);
      getProductCommonData(this, tiyData, types, false);
    }
  }
</script>

<!--css样式-->
<style lang="less" scoped>
@import  (once,optional)  "../css/base";

  .operation_item {
    text-align: left;
    margin-right: 20px;
  }

  .modal_newuser_form {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .modal_newuser_form_input {
    width: 200px;
    margin-right: 10px;
  }

  .form_step {
    width: 160px;
  }

  .modal_base_div {
    text-align: left;
    margin-top: 20px;
    padding: 20px;
    border: dotted thin #d1d1d1
  }

  .modal_base_div_title {
    text-align: left;
    margin-bottom: 10px
  }
  .color_modal{
    z-index:999999
  }

  .item_card{
    margin: 10px;
    text-align: center;
    /*border: solid #f1f1f1 1px;*/
    /*cursor: pointer;*/
    width: 100px;
  }
.list-item {
  .flex-colum-wrap;
  justify-items: left;
  align-items: start;

  .item-top{
    width: 100%;
    margin-bottom: 5px;
  }
  .item-content {
    width: 100%;
    margin-bottom: 10px;
    text-align: left;
  }
  .item-bottom {
    //position: absolute;
    width: 100%;
    display: block;
    padding: 0 1rem 0 0;
    text-align: right;
    button {
      margin-right: 0.5rem;
    }
  }
}

.price-title {
  display: inline-block;
  width: 80px;
  color: #999;
}
.price-grade {
  display: inline-block;
  width: 60px;
}
.price-mount {
  display: inline-block;
  width: 120px;
}
.price-value {
  display: inline-block;
  width: 150px;
}

</style>
